<script setup lang="ts">
import { animationAsync, animation } from 'vjmap3d';
import { onMounted, ref } from 'vue';
const props = defineProps<{
    carId: string,
    driverName: string,
    carType: string,
    carState: string
}>()
const cartag = ref(null)
// 车牌号
const carId = ref(props.carId);
// 驾驶员姓名
const driverName = ref(props.driverName);
// 车类型
const carType = ref(props.carType);
// 车状态
const carState = ref(props.carState);

onMounted(() => {
    // 进入动画
    animation({
        // @ts-ignore
        from: cartag.value.style,
        to: {
            opacity: 1.0,
        },
        duration: 800
    }) 
})

const exit = async () => {
    // 退出动画
    return animationAsync({
        // @ts-ignore
        from: cartag.value.style,
        to: {
            opacity: 0.0,
        },
        duration: 500
    }) 
}

defineExpose({
    carId,
    driverName,
    carType,
    carState,
    exit
})
</script>

<template>
    <div ref="cartag" class="tag">
        <div class="container">
            <div>车牌号</div>
            <div>{{ carId }}</div>
        </div>
        <div class="container">
            <div>司机</div>
            <div>{{ driverName }}</div>

        </div>
        <div class="container">
            <div>车型</div>
            <div>{{ carType }}</div>

        </div>
        <div class="container">
            <div>状态</div>
            <div v-if="carState == '正常'" style="color: #00ff00;">{{ carState }}</div>
            <div v-if="carState == '异常'" style="color: #ffff00;">{{ carState }}</div>
        </div>
    </div>
</template>

<style scoped>
.tag {
    opacity: 0.0;
    background-image: url(../assets/carbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;

    color: #fff;
    font-size: 16px;

    z-index: 20;
    padding: 20px 30px;
    padding-bottom: 80px;
}

.container {
    width: 200px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container div {
    padding: 6px 0px;
    width: 120px;
}
</style>